<template>
    <div style="display: flex; justify-content: center; background-color: #fff;">
        <div style="width: 755px">
            <div style="width: 751px; padding-left: 4px;">
                <div style="font-size: 14px;">
                    <span>{{ ftitle_en }} > {{ stitle_en }} > {{ productDetail.title }}</span>
                </div>
                <div style="border: 2px solid #EAEAEA; margin-top: 10px;">
                    <div style="display: flex; justify-content: center;">
                        <div style="width: 270px;display: inline-block;">
                            <!-- <img  :src="previcwUrl" alt="" style="width: 100%; object-fit: cover;" v-if="previcwUrl"  @click="handlePreview"> -->
                            <div class="demo-image__preview">
                                <el-image
                                style="width: 250px; height: 250px"
                                :src="previcwUrl"
                                :zoom-rate="1.2"
                                :max-scale="7"
                                :min-scale="0.2"
                                :preview-src-list="srcList"
                                :initial-index="4"
                                fit="cover"
                                />
                            </div>
                            <!-- <div v-else class="bty-no-image" ><el-icon><icon-picture /></el-icon></div> -->
                        </div>
                        <div
                            style="display: inline-block; width: 460px; margin-left: 20px; border-bottom: 1px solid #EAEAEA; height: 270px;">
                            <div style="font-size: 18px; font-weight: bold;">
                                {{ productDetail.title }}
                            </div>
                            <div style="margin-top: 50px; font-size: 14px;">
                                <span>serial</span> {{ productDetail.serial }}
                                <br>
                                <span>unit: </span> {{ productDetail.specs }} <span v-if="productDetail.unit">/ {{ productDetail.unit }}</span>
                            </div>
                            <div style="margin-top: 30px;">
                                <span>count<el-input-number v-model="num" :min="1" :max="100"
                                        @change="handleChange" /></span>
                            </div>
                            <div style="margin-top: 10px;" v-if="productDetail.inventory">
                                <span>inventory:{{ productDetail.inventory }}</span>
                            </div>
                            <div style="margin-top: 40px; float: right; padding-right: 30px;" v-if="productDetail.file_url">
                                <div style="height: 20px;">
                                    <el-button color="#1D8BA1" type="success" size="small"  @click="OpenFile(productDetail.file_url)">DownloadDocument</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex; justify-content: center; padding-left: 5px;">
                        <div style="display: inline-block; flex: 3;">
                            <!-- <div style="width: 50px;display: inline-block; margin-top: 10px;" v-for="(item, index) in productDetail.img_format" :key="index">
                                <img :src="item.url" alt="" style="width: 100%;">
                            </div> -->
                        </div>
                        <div style="display: inline-block; flex: 3; margin-top: 10px;">
                            <span>price: $</span>
                            <div style="display: inline-block; font-size: 25px; font-weight: bold; color: #267CD6;">
                                {{ total }}</div>
                            <div style="display: inline-block; margin-left: 60px; padding-top: 5px; padding-bottom: 10px;">
                                <el-button color="#267CD6" type="success" size="default" @click="orderProduct">AddShoppingCart</el-button>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="margin-top: 20px; min-height: 300px;border: 1px solid #EAEAEA;">
                    <el-tabs v-model="activeName" class="demo-tabs">
                        <el-tab-pane label="ntroduct" name="first">
                            <div style="padding: 20px;">
                                <div style="font-size: 12px;">
                                    {{ productDetail.introduct }}
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="explain" name="second">
                            <div style="padding: 20px;">
                                <div style="font-size: 12px;">
                                    {{ productDetail.explain }}
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="storage" name="three">
                            <div style="padding: 20px;">
                                <div style="font-size: 12px;">
                                    {{ productDetail.storage }}
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="Related Products" name="four">
                            <div style="text-align: center; margin-left: 100px; margin-top: 60px;">
                                <el-card style="width: 480px" shadow="always">
                                    <span>Related Products</span>
                                    <div style="padding: 20px;">
                                        <el-button color="#267CD6" type="success" size="large" @click="forProductList">{{ stitle_en }}</el-button>
                                    </div>
                                </el-card>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <!-- 
                <div style="margin-top: 20px;">
                    <div >浏览此产品的顾客也同时浏览</div>
                    <div style="width: 751px; overflow: hidden; margin-top: 10px;">
                        <div style="width: 120px;display: inline-block; border: 1px solid #267CD6; margin-top: 5px; margin-left: 10px;" v-for="item in 5" key="item">
                        <img src="/src/assets/产品详情.jpeg" alt="" style="width: 100%;">
                        <span style="font-size: 10px; padding: 10px;">{{ productDetail.title }}</span>
                    </div>
                    </div>
                </div> 
                -->
            </div>
        </div>
    </div>
</template>


<script setup>
import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { getProductById, getOrderProduct } from "@/requests/index";
import { ElMessage } from 'element-plus';
import { ElImage, ElDialog } from 'element-plus';

const srcList = ref([]);


const router = useRouter();
const route = useRoute();
const productDetail = ref({
    id: null,
    title: "",
    serial: "",
    price: 0,
    cover: "",
    img: "",
    introduct: "",
    explain: "",
    detail_file: "",
    recent_id: "",
    count: null,
    storage: "",
    specs: "",
    unit: "",
    inventory: null,
    category_info: "",
    second_category_id: null,
    file_url: ""
});
const previcwUrl = ref();
const ftitle_en = ref();
const stitle_en = ref();
const queryParam = ref(route.query.id || '');
const total = ref(0);
const num = ref(1)
const handleChange = (value) => {
    total.value = parseFloat((value * productDetail.value.price).toFixed(2))
}

const activeName = ref('first');


const getProductDetail = async(id)=>{
    console.log(id);
    const res = await getProductById({"id": id});
    if (res.status === 2000){
        const data = res.data;
        const detail = data.data;
        ftitle_en.value = data.ftitle_en;
        stitle_en.value = data.stitle_en;
        productDetail.id = detail.id;
        productDetail.value.title = detail.title_en;
        productDetail.value.serial = detail.serial;
        productDetail.value.price = detail.price_en;
        productDetail.value.cover = detail.cover;
        productDetail.value.img = detail.img;
        productDetail.value.introduct = detail.introduct_en;
        productDetail.value.explain = detail.explain_en;
        productDetail.value.detail_file = detail.detail_file;
        productDetail.value.recent_id = detail.recent_id;
        productDetail.value.count = detail.count;
        productDetail.value.storage = detail.storage;
        productDetail.value.specs = detail.specs;
        productDetail.value.unit = detail.unit;
        productDetail.value.inventory = detail.inventory;
        productDetail.value.category_info = detail.category_info;
        productDetail.value.second_category_id = detail.second_category_id;
        total.value = detail.price;
        productDetail.value.file_url = detail.file_url;
        if ((detail.img_format).length > 0){
            previcwUrl.value = ((detail.img_format)[0]).url;
            srcList.value = [];
            detail.img_format.forEach(item => srcList.value.push(item.url));
        }
    }else{
        console.log("获取数据失败")
    }
};
getProductDetail(queryParam.value);
watch(() => route.query.id, (newId, oldId) => {
  queryParam.value = newId;
  previcwUrl.value = "";
  getProductDetail(newId);
});

const forProductList = ()=>{
  router.push({path: "/en/category", query: {"id": productDetail.value.second_category_id}});
}

// 打开文档
const OpenFile =(file)=>{
    window.open(file, "_blank")
}

const orderProduct = async (id) =>{
    if (!window.localStorage.getItem("token")){
        ElMessage.error("Please login");
        num.value = 1
        router.push({ path: '/en/login' });
    }
    const res = await getOrderProduct({"id": productDetail.id, "count": num.value});
    console.log(res)
    if (res.status === 2000){
        ElMessage.success("Add shopping cart success");
        num.value = 1
    } else{
        ElMessage.error("Please login");
        num.value = 1
        router.push({ path: '/en/login' });
    }
}
</script>

<style scoped>
:deep(.el-input__inner) {
    border: 0;
}

:deep(.el-tabs__nav) {
    margin-left: 20px;
}

:deep(.el-tabs__item) {
    font-size: 15px;
    margin-right: 10px;
}
.bty-no-image{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 270px; /* 可以根据需要调整 */
    height: 270px;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    color: #888;
    font-size: 64px;
}

.preview-img {
  width: 100%;
  z-index: 2000;
}
</style>